<!-- 分销订单 -->
<template>
	<view class="index-box page">
		<status-bar title="分销订单"></status-bar>
		<view class="menuList">
			<view class="nav_top_box" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
				<view
					class="navlists"
					:style="{ '--color': color }"
					:class="navTab == 1 ? 'navAction thmeColor' : 'pageColor'"
					@click="navclick(1, 0)"
					><text>收益订单</text></view
				>
				<view
					class="navlists"
					:style="{ '--color': color }"
					:class="navTab == 2 ? 'navAction thmeColor' : 'pageColor'"
					@click="navclick(2, 1)"
					><text>退款订单</text></view
				>
				<view
					class="Advertising_article thmeBg"
					:style="{ '--color': color, left: 50 * (navTab - 1) + '%' }"></view>
			</view>
		</view>
		<view class="firiends">
			<view class="Afriend" v-for="(item, index) in distribution_list" :key="index">
				<image
					class="friHead"
					@error="item.v_headimg = ''"
					:src="item.v_headimg ? item.v_headimg : staticUrl + '/images/jh_up/head.jpg'"
					mode=""></image>
				<view class="friMsg">
					<view class="friName">
						<text class="name">{{ item.v_name }}</text>
						<template v-if="item.status == 0">
							<text class="right state2" v-if="parseInt(item.state) < 4">待确认</text>
							<text class="right state2" v-if="parseInt(item.state) > 3">待入账</text>
						</template>
						<text class="right state1" v-if="item.status == 1">已入账</text>
						<text class="right state2" v-if="item.status == 2">已退款</text>
					</view>
					<view class="flex-box align-center">
						<view class="flex">
							<view class="friTime">
								<text>订单号：{{ item.order_code }}</text>
							</view>
							<view class="friName">
								<text class="name">{{ item.add_time }}</text>
							</view>
						</view>
						<text class="right bonus">{{ item.money }}</text>
					</view>
				</view>
			</view>
		</view>
		<emptys
			v-if="noData"
			:title="navTab == 1 ? '你还没有收益订单哦 ~' : '你还没有退款订单哦 ~'"></emptys>

		<backTop v-if="toTop"></backTop>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	var that;
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				navTab: 1,
				toTop: false,
				brokerage_list: [],
				noData: false,
				distribution_list: '',
				channel: '', // 入口团队管理
			};
		},
		onShow() {
			that = this;
			that.distribution_order();
		},
		onLoad(e) {
			let that = this;
			if (e.state == 1) {
				that.channel = 2;
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.toTop = true;
			} else {
				this.toTop = false;
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid + '&pageType=99',
				imageUrl: shareData.imageUrl,
			};
		},
		computed: {
			...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'vid']),
		},
		methods: {
			navclick(i, positions) {
				that.navTab = i;
				that.distribution_order();
			},
			distribution_order() {
				let that = this;
				that.noData = false;
				that.$http
					.post({
						url: '/zzj_singleSaleApi/distribution_list',
						data: {
							type: that.navTab,
							channel: that.channel,
						},
					})
					.then((res) => {
						if (res.errcode == 100) {
							that.distribution_list = res.data;
						}
						if (!that.distribution_list || that.distribution_list.length < 1) {
							that.noData = true;
						}
					});
			},
		},
	};
</script>

<style scoped>
	.right {
		float: right;
	}
	.state1 {
		color: #84e491;
	}
	.state2 {
		color: #ffc000;
	}
	.bonus {
		color: #ff4400;
		font-size: 32upx;
		font-weight: bold;
	}
	.nav_top_box {
		width: 100%;
		height: 88upx;
		background: #ffffff;
		line-height: 88upx;
		font-size: 28upx;
		color: #333333;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		top: 0;
		box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);
	}
	.navlists {
		width: 50%;
		display: inline-block;
		text-align: center;
		font-size: 28upx;
	}
	.pageColor {
		color: #999999;
	}
	.navAction {
		position: relative;
	}
	.Advertising_article {
		width: 50upx;
		height: 4upx;
		position: absolute;
		bottom: 0;
		transition: left 0.2s;
		border-radius: 4upx;
		transform: translateX(160upx);
	}

	.firiends {
		padding-top: 88rpx;
		background-color: white;
	}
	.Afriend {
		display: flex;
		justify-content: space-between;
		padding: 30upx;
		border-bottom: 1px solid #f5f5f5;
	}

	.friHead {
		height: 128upx;
		width: 128upx;
		margin-right: 30upx;
	}
	.friName {
		color: #222222;
		font-size: 24upx;
	}
	.friName .name {
		font-size: 28upx;
	}
	.friTime {
		color: #9c9c9c;
		font-size: 24upx;
		margin: 10upx 0;
	}
	.friMsg {
		flex: 1;
	}
	.Afriend:nth-last-child(1) {
		border-bottom: none;
	}
</style>
